<template>
  <div id="home">
    <div class="containner flex item-start justify-between">
      <!-- 分类 -->
      <div class="category-bar py-10 bg-white text-sm dark box-shadow">
        <div class="category" v-for="one in category_list" :key="one.cate_id" @mousemove="cate_over(one.cate_id)"
          @mouseout="cate_over(-1)">
          <!-- 一级 -->
          <div class="category-1 hover-bg-gray hover-red px-20 py-5 hand">{{one.cate_name}}</div>
          <div class="category-group box-shadow px-10 py-10" :class="{'active':current_category_id == one.cate_id}">
            <!-- 二级 -->
            <div v-for="tow in one.children" :key="tow.cate_id" class="my-10 flex item-start">
              <div class="category-2 black hand hover-red flex justify-end">
                <div class="bold">{{tow.cate_name}}</div>
                <div class="ml-10 weight">&gt;</div>
              </div>
              <!-- 三级 -->
              <div class="flex item-center wrap category_small_group">
                <div @click="three_clicked(three)" v-for="three in tow.children" :key="three.cate_id"
                  class="category-3 dark hand hover-red ml-10">
                  {{three.cate_name}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="carousel-bar hand">
        <div class="carousel-imgs"><img src="@/assets/img/carousel01.jpg" width="790px" height="490px"
            class="carousel-img">
        </div>
        <div class="carousel-controls flex item-center">
          <div class="carousel-control mx-5 active"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
        </div>
      </div>
      <!-- 推荐商品图 -->
      <div class="recommend-bar flex-column justify-between item-center"><img src="@/assets/img/carousel-right01.jpg"
          width="190px"><img src="@/assets/img/carousel-right02.jpg" width="190px"><img
          src="@/assets/img/carousel-right03.jpg" width="190px"></div>
    </div>
    <!-- 推荐商品 -->
    <div class="containner mt-20" v-for="recommendCategory in recommend_spu_list"
      :key="recommendCategory.category.cate_id">
      <div class="recommend-category px-20 py-10 my-10 gray text-xl bold"> {{recommendCategory.category.cate_name}} 专场
      </div>
      <div class="flex wrap item-start">
        <spu v-for="spu in  recommendCategory.spuList" :spu="spu" @click.native="spu_clicked(spu)"></spu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'

  import Spu from '../components/Spu.vue'
  export default {
    //注册子组件
    components: {
      'spu': Spu
    },
    computed: {
      //推荐商品分类和商品 recommend_spu_list
      ...mapState('product', ['recommend_spu_list', 'base_img_url']),
      //分类数据
      ...mapState('category', ['category_list', 'current_category_id'])
    },
    methods: {
      /* get_recommend_category_list() {
        return this.$store.state.recommend_category_list
      } */
      ...mapActions('product', ['get_recommend_category_list']),
      ...mapActions('category', ['get_category_list']),
      ...mapMutations('product', ['set_spu']),
      ...mapMutations('category', ['set_current_category_id', 'set_cate']),
      spu_clicked(spu) {
        //保存当前点击的商品
        this.set_spu(spu);
        //跳转到商品详情页面
        this.$router.push({
          path: '/spuDetails'
        })
      },
      //一级分类mouseove事件
      cate_over(cate_id) {
        this.set_current_category_id(cate_id)
      },
      //点击三级分类
      three_clicked(cate) {
        // 保存点击的三级分类数据
        this.set_cate(cate);
        //跳转商品列表页
        this.$router.push({
          path: '/spulist'
        })
      }
    },
    mounted() {
      //获取推荐商品
      this.get_recommend_category_list();
      //获取分类数据
      this.get_category_list();
    }
  }
</script>

<style scoped>
  @import '../assets/css/home.css';
</style>
